import Base from "../base.js"
// import GradlesApi from "../../api/gradles.js"
import movieAdd from "../../api/movies.js"

export default class extends Base {
  constructor(props) {
    super(props);
    this.data = {
      movie: {
        _id: props._id,
      }
    }
  }
  render() {
    this.$el.html(`
      <div class="layui-row">
          <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6">
                      <h1>图片上传</h1>
                      <button type="button" class="layui-btn" id="uploadImgs-btn">
                          <i class="layui-icon">&#xe67c;</i>上传剧集图片
                      </button>
                      <button type="button" class="layui-btn" id="uploadPoster-btn">
                          <i class="layui-icon">&#xe67c;</i>上传海报
                      </button>
          </div>
          <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6">
                  <h1>电影名</h1>
                  <h1 class="moviename"></h1>
          </div>
          <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                  <h1>图片列表</h1>
                  <span class="imgs"></span>
          </div>
      </div>
       `);
    this.$movieNameEl = $(".moviename");
    this.$imgsEl = $(".imgs")
  }
  async getOne() {
    const { _id } = this.data.movie;
    this.data.movie = await movieAdd.getOne(_id);
  }
  rerender() {
    const { cname } = this.data.movie;
    this.$movieNameEl.html(cname);
    const imgStr = _.map(this.data.movie.images, item => {
      return `<img style="width:200px;height:200px" src="/resource${item}" />`;
    });
    this.$imgsEl.html(imgStr);
  }
  async mounted() {
    // console.log(this.data);
    await this.getOne();
    this.rerender()
  }
  // 删除图片
 async delete(e) {
        const { _id } = this.data.movie;
        //jQuery的replace方法，如有字符串的参1，则替换成参2
        const url =  $(e.target).attr("src").replace("/resource", "");
        this.data.movie = await movieAdd.deleteImg({ _id, url});
        this.rerender();
    
}
  handle() {
    this.upload = layui.upload;
    this.upload.render({
      elem: '#uploadImgs-btn' //绑定元素
      , url: "/resource/movies/uploadImgs"//上传接口
      , data: {
        _id: () => {
          return this.data.movie._id;
        }
      }
      , multiple: true
      //上传成功后的回调函数
      , done: res => {
        //上传完毕回调
        this.data.movie = res;
        //  console.log(res);
        this.rerender();
      }
      , error: function () {
        //请求异常回调
      }
    });

    this.upload.render({
      elem: '#uploadPoster-btn' //绑定元素
      , url: "/resource/movies/uploadPoster"//上传接口
      , data: {
        _id: () => {
          return this.data.movie._id;
        }
      }
      , multiple: true
      //上传成功后的回调函数
      , done: res => {
        //上传完毕回调
        this.data.movie = res;
        //  console.log(res);
        this.rerender();
      }
      , error: function () {
        //请求异常回调
      }
    });
    this.$imgsEl.on("click", "img", this.delete.bind(this))
  }
}